import AddActive from '@/pages/cues/active/components/AddActive';
import TableActive from '@/pages/cues/active/components/TableActive';
import TableSubmit from '@/pages/cues/topic/submit/TableSubmit';
import { PageContainer, ProForm, ProFormDateRangePicker } from '@ant-design/pro-components';
import { ActionType } from '@ant-design/pro-table';
import dayjs from 'dayjs';
import RcResizeObserver from 'rc-resize-observer';
import React, { useEffect, useRef, useState } from 'react';
import { useAccess } from 'umi';
interface DetailsCuesProps {
  type: string;
  submitId?: string;
}
const Clue: React.FC<DetailsCuesProps> = ({ type, submitId }) => {
  const access = useAccess();

  const [width, setWidth] = useState(500);

  const actionRef = useRef<ActionType>();

  const [selectTime, setSelectTimeState] = useState([
    dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss'),
    dayjs().endOf('year').format('YYYY-MM-DD HH:mm:ss'),
  ]);

  // 使用 useEffect 监听 type 变化
  useEffect(() => {
    if (type) {
      setTabActiveKeyState(type);
    }
  }, [type]); // 添加 type 作为依赖

  /**
   * 搜索参数
   */
  const [tabActiveKey, setTabActiveKeyState] = useState<string>(type || 'TableActive');

  const tabList = () => {
    return [
      {
        tab: '主动报送线索',
        key: 'TableActive',
      },
      {
        tab: '选题报送线索',
        key: 'TableSubmit',
      },
    ];
  };

  return (
    <RcResizeObserver
      key="resize-observer"
      onResize={(size) => {
        setWidth(size.width);
      }}
    >
      <PageContainer
        tabList={tabList()}
        tabActiveKey={tabActiveKey}
        onTabChange={setTabActiveKeyState}
        tabBarExtraContent={{
          right: (
            <div style={{ display: 'flex' }}>
              <ProForm submitter={false} layout="inline">
                <ProFormDateRangePicker
                  width="md"
                  name="deadlineTime"
                  label="时间"
                  initialValue={[dayjs().startOf('year'), dayjs().endOf('year')]}
                  fieldProps={{
                    minDate: dayjs().subtract(1, 'year'),
                    presets: [
                      { label: '今年', value: [dayjs().startOf('year'), dayjs().endOf('year')] }, // This year
                      {
                        label: '去年',
                        value: [
                          dayjs().subtract(1, 'year'),
                          dayjs().subtract(1, 'year').endOf('year'),
                        ],
                      }, // Last year
                    ],
                    format: 'YYYY-MM-DD',
                    allowClear: false,
                    style: { marginRight: 10 },
                    onChange(date, dateString) {
                      console.log(dateString);
                      setSelectTimeState(dateString);
                    },
                  }}
                />
              </ProForm>
              {access.主动报送x报送线索x页面 && (
                <AddActive
                  key="add_active"
                  onRefurbish={() => {
                    actionRef?.current?.reset();
                  }}
                  triggerMode="card"
                />
              )}
            </div>
          ),
          left: (
            <span
              style={{
                marginInlineEnd: '12px',
                color: 'rgba(0, 0, 0, 0.88)',
                fontWeight: 600,
                fontSize: 20,
                height: 48,
                paddingRight: 35,
                marginBottom: 10,
              }}
              title="报送线索"
            >
              报送线索
            </span>
          ),
        }}
      >
        {tabActiveKey === 'TableActive' && (
          <TableActive actionRef={actionRef} createdTimes={selectTime} submitId={submitId} />
        )}
        {tabActiveKey === 'TableSubmit' && (
          <TableSubmit isEditable={false} createdTimes={selectTime} submitId={submitId} />
        )}
      </PageContainer>
    </RcResizeObserver>
  );
};
export default Clue;
